<template>
	
       <div style="background-color: #000;position: relative;" :style="{height:screenHeight+'px'}" v-if="videoData">
   	      <div style="height: 80px;position: fixed;z-index: 999;">
   	      	<view  class="home-meun">
   	      		<view class="like meun-list">
   	      		  <text class="fs-33 fc-8a meun-a" :class="showMenu ? 'active-meun' :'' " style="left: 250rpx;" @click="changeview(true)">在追 </text>	 
				   <text :class="showMenu ? '' :'active-meun' "  @click="changeview(false)"  style="right: 250rpx;" class="meun-a fc-8a fs-33" >推荐 </text>
   	      		</view>
   	    
   	      	</view>
   	      </div>
		<!-- 在追 推荐 -->
		<view v-if="showMenu" class="zaizhui"  :style="{height:(screenHeight+ 80) +'px'}">
			<view class="" style="padding-top: 200rpx;">
				
			</view>
			<text class="fs-w"> 再追的内容</text>
		</view>
		<!-- 推荐的内容 -->
	   <swiper v-else class="swiper" :style="{height:screenHeight+'px'}" :vertical="true" @change="change">
			<swiper-item v-for="(item,index) in videoData" :style="{height:screenHeight +'px'}" :key="item.docid" :class="current+'hhs'+index" class="swiper-item" v-if="(current + 4) > index">
				<videoPlayer v-if="current == index && hideSHow" :video="item.video"  ref="player"></videoPlayer>
				<image v-else :src="item.short.cover_url" style="width: 750rpx;height: 500rpx;" mode="widthFix"></image>
			</swiper-item>
	   </swiper>
		<!-- 推荐的内容end -->
	   <div style="height: 80px;">
		 <tabBa tabbarColor='home-color'></tabBa>
	   </div>
	</div>
	
</template>
 
<script>
	import videoPlayer from "@/components/video/videoPlayer.nvue";
	// import API from '@/components/video/base/api.js'
	import Likes from '@/components/video/tool.nvue'
	import tabBa from '@/components/video/tabbar.nvue'
	// var time = null
	export default {
	
		components: {
			videoPlayer,tabBa,Likes
		},
		name: "video-list",
		data() {
			return {
				current:0,
				showMenu:false,
				videoData:[],
				page:0,
				hideSHow:true,
				screenHeight: uni.getSystemInfoSync().windowHeight - 80
			};
		},
		onLoad() {
			this.homeData()
		},onHide() {
			this.hideSHow = false
			console.log( this.hideSHow )
		},
		onShow() {
			this.hideSHow = true
			console.log('console.log( this.hideSHow )', this.hideSHow )
		},
		methods: {
			// 切换 显示 再追 还是 推荐
			changeview(s){
				this.showMenu = s
			},
			async homeData(){
				await uni.request({
					url: '/wanlshop/short/shortChildList?id=1',
					complete: res => {
						if(res.res.code === 1){
							this.videoData =this.videoData.concat( res.data.data ) 
							console.log(this.videoData);
						}else{
							uni.showToast({
							    title: '服务器繁忙',
							    icon: 'none'
							});
						}
					}
				});
			},
			/// 数据
		 //   async homeData(){
			//      this.page ++
			// 	let res = await API.getJSON({
			// 		page:this.page,
			// 		type:'影视'
			// 	})
				
			// 	this.videoData =this.videoData.concat( API.listData ) 
			// 	// console.log(res)
			// },
			change(res) {
				// console.log(res)
				this.current = res.detail.current;
				console.log(this.current,this.videoData.length)
				if((this.current + 3 ) > this.videoData.length) {
				  this.homeData();
				}
			
			},
		
		},
		watch: {
			myList() {
				this.list = this.myList;
			}
		}
	}
</script>
 
<style>
	.swiper {
		/* position: absolute; */
		width: 750rpx;
		/* height: 500vh; */
	}
 
	.swiper-item {
		width: 750rpx;
		/* height: 500vh; */
		z-index: 9;
	}
 .meun-list {
 	width: 750rpx;
 	 padding: 20upx 0;
 	 /* height: 100upx; */
 	 text-align: center;
	 position: relative;
 	 /* line-height: 100upx; */
 }
 .meun-a {
	 /* display: block; */
	 position: absolute;
	 top: 100rpx;
	 width: 125rpx;
	 text-align: center;	
 }

	/* 	.left-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		left: 10px;
	}
	.right-box {
		z-index: 20;
		position: absolute;
		bottom: 50px;
		right: 10px;
	} */
</style>